<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box" abc="hello" qwe="123456" title="这是title" id="cont" data-abc="半内置的abc" data-id="半自定义的id"></div>
</body>
<script>
  var box = document.querySelector(".box");

  console.log( box.title );
  console.log( box.id );

  console.log( box.abc );

  console.log( box.getAttribute("abc") );
  console.log( box.getAttribute("qwe") );

  box.setAttribute("asd", "world");

  console.log( box.getAttribute("asd") );

  box.setAttribute("abc", "hahaha");

  box.removeAttribute("abc");
  box.removeAttribute("qwe");
  box.removeAttribute("asd");

  console.log( box.getAttribute("id") );
  console.log( box.getAttribute("title") );
  console.log( box.getAttribute("class") );

  console.log( box.class );



  console.log( box.dataset.abc )
  console.log( box.dataset.id )

  box.dataset.qwe = "你好"
  

  delete box.dataset.abc;

  
  

  
  

</script>
</html>